<template>
 <main class="item">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="commodity-img">
          <img class="commodity-figure" width="500" height="500" :src="itemInfo.pic_name">
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="commodity-info">
          <h4 class="commodity-title">{{itemInfo.name}}</h4>
          <div class="texture-wrap">
            <span class="texture-title">材质：</span>
            <span class="texture-info">{{itemInfo.material}}</span>
          </div>
          <div class="size-wrap">
            <span class="size-title">尺寸：</span>
            <span class="size-info">{{itemInfo.p_long}}X{{itemInfo.p_width}}X{{itemInfo.p_height}}</span>
          </div>
          <div class="number-wrap">
            <span class="number-title">商品编号：</span>
            <span class="number-info">{{itemInfo.number}}</span>
          </div>
          <div class="price">
            <em>￥</em>
            <i>{{itemInfo.price}}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
 </main>
</template>

<script>
export default {
  data () {
    return {
      itemInfo: {}
    }
  },
  created () {
    let id = this.$route.query.id
    this.$http.post('api/productById', {
      id: id
    }).then((response) => {
      const data = response.data
      this.itemInfo = data.data
      this.$store.state.title = this.itemInfo.name
      this.$store.state.meunName = this.itemInfo.home_class
    }).catch((err) => {
      console.log(err)
    })
  }
}
</script>

<style lang="less" scoped>
.row{
  border: 1px solid #dcdcdc;
  border-radius: 8px;
}
.commodity-img{
  max-height: 600px;
  max-width: 600px;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width:780px){
    padding: 15px;
  }
  .commodity-figure{
    display: block;
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 500px;
    // max-width: 500px;
  }
}
.commodity-info{
  max-width: 600px;
  max-height: 600px;
  padding: 50px;
  .commodity-title{
    font-size: 24px;
    padding-top: 20px;
  }
  .texture-wrap{
    font-size: 20px;
    padding: 20px 0;
  }
  .size-wrap{
    font-size: 20px;
    padding: 20px 0;
  }
  .number-wrap{
    font-size: 20px;
    padding: 20px 0;
  }
  .price{
    color: #de4037;
    em{
      font-weight: 700;
      font-size: 22px;
      line-height: 20px;
      text-align: right;
      font-style: normal;
    }
    i{
      font-size: 24px;
      padding-left: 2px;
      font-style: normal;
    }
  }
}
</style>
